<template>
  <div>
    <el-row>
      <el-col :span="16" :offset="4" style="margin-top: 20px;text-align: right">
        <div style="text-align: right;margin-bottom: 20px">
          <el-select v-model="value" placeholder="请选择" style="margin-right: 20px">
            <el-option
              v-for="item in part_list"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-button @click="seacher" type="success">搜索</el-button>
        </div>
        <div class="grid-content bg-purple-dark" style="height: 450px;overflow: auto">
          <hr>
          <div v-for="item in ruleForm">
            <el-descriptions :title="item.part" style="margin-bottom: 10px">
              <el-descriptions-item label="用户名">{{item.name}}</el-descriptions-item>
              <el-descriptions-item label="手机号">{{item.telephone}}</el-descriptions-item>
              <el-descriptions-item label="邮箱">{{item.email}}</el-descriptions-item>
              <el-descriptions-item label="性别">
                <el-tag size="small">{{item.sex}}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="职位">{{item.position}}</el-descriptions-item>
            </el-descriptions>
            <hr>
          </div>

        </div>
      </el-col>
    </el-row>


  </div>
</template>

<script>
  export default {
    name: 'AddressListView',
    data () {
      return {
        ruleForm: [],
        part_list: [],
        value:''
      }
    },
    mounted () {
      this.get_data()
      this.get_part()
    },
    methods: {
      seacher(){
        this.get_data(this.value)
      },
      get_part () {
        this.$axios({
          url: this.$settings.base_url + `/user/partforposition/`,
          method: 'get'
        }).then(res => {
          if (res.data.code === 100) {
            this.part_list = res.data.data
          }
        })
      },

      get_data (part=1) {
        this.$axios({
          url: this.$settings.base_url +`/user/addresslist/?part=${part}`,
          method: 'get'
        }).then(res => {
          this.ruleForm = res.data.data

        })
      }

    }
  }
</script>

<style scoped>

</style>
